<template>
  <a-modal
    :visible="visible"
    title="信息异动"
    :okText="`信息异动${isAdd ? '申报' : '修改'}`"
    cancelText="关闭当前异动"
    :confirmLoading="isSubmit"
    :afterClose="handleClose"
    width="1120px"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-form :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="异动编号">
            <a-input disabled v-model="data.ApplyNo"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="异动姓名">
            <a-input disabled v-model="data.Proposer"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="异动身份证">
            <a-input disabled v-model="data.IDCard"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="异动类型">
            <a-select
              v-decorator="['YDLX', { rules: [{ required: true, message: '请选择异动类型' }] }]"
              placeholder="请选择异动类型"
              :options="typeOptions"
            ></a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12" v-if="form.getFieldValue('YDLX') === '变更'">
          <a-form-item label="现保障人口">
            <a-input
              type="number"
              v-decorator="['XBZRK', { rules: [{ required: true, message: '请输入现保障人口' }] }]"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12" v-if="form.getFieldValue('YDLX') === '变更'">
          <a-form-item label="现人均住房面积">
            <a-input
              type="number"
              v-decorator="['XRJZFMJ', { rules: [{ required: true, message: '请输入现人均住房面积' }] }]"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="异动原因" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
            <a-textarea
              v-decorator="['YdReason', { rules: [{ required: true, message: '请输入异动原因' }] }]"
              :auto-size="{ minRows: 2, maxRows: 4 }"
            ></a-textarea>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="经办人">
            <a-input disabled v-decorator="['Agent']"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="异动时间">
            <a-input disabled v-decorator="['YdData']"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
import moment from 'moment'
import { postYdsb } from '@/api/common'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: 'declare' }),
      isSubmit: false,
      typeOptions: [
        {
          label: '退出',
          value: '退出',
        },
        {
          label: '变更',
          value: '变更',
        },
      ],
    }
  },
  watch: {
    visible: {
      handler(n) {
        if (n) {
          this.$nextTick(() => {
            console.log('111', this.data.XBZRK, this.data.XRJZFMJ)
            if (!this.$isEmpty(this.data.ydReason)) {
              this.form.setFieldsValue({
                YdReason: this.data.ydReason,
                YDLX: this.data.YDLX,
                XBZRK: this.data.XBZRK,
                XRJZFMJ: this.data.XRJZFMJ,
              })
              setTimeout(() => {
                this.form.setFieldsValue({
                  XBZRK: this.data.XBZRK,
                  XRJZFMJ: this.data.XRJZFMJ,
                })
              }, 0)
            }
            this.form.setFieldsValue({
              Agent: this.$store.getters.nickname,
              YdData: moment(new Date()).format('YYYY-MM-DD'),
            })
          })
        }
      },
    },
  },
  computed: {
    isAdd() {
      if (this.$isEmpty(this.data)) return true
      const { QjState, SjState } = this.data
      if (QjState === '0') {
        // 市级
        if (SjState === '-1') {
          return false
        }
        return true
      } else {
        return QjState !== '-1'
      }
    },
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
      this.form.resetFields()
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.isSubmit = true
          const add = {
            State: 'add',
            ydsb: {
              YdReason: values.YdReason,
              YDLX: values.YDLX,
              Agent: values.Agent,
              XBZRK: values.XBZRK,
              XRJZFMJ: values.XRJZFMJ,
              YdData: values.YdData,
              ProposerID: this.data.ID,
            },
          }
          const edit = {
            State: 'Alter',
            ydsb: {
              ID: this.data.ID,
              State: 'Alter',
              YDLX: values.YDLX,
              XRJZFMJ: values.XRJZFMJ,
              XBZRK: values.XBZRK,
              YdReason: values.YdReason,
            },
          }
          postYdsb(this.isAdd ? add : edit)
            .then((res) => {
              this.$message.success(this.isAdd ? '异动申报成功' : '异动修改成功')
              this.$parent.tableRefresh()
              this.handleClose()
            })
            .finally(() => {
              this.isSubmit = false
            })
        }
      })
    },
    handleCancel() {
      this.handleClose()
    },
  },
}
</script>
<style scoped></style>
